<template>
  <div class="hry-content">
    <a-affix>
      <header>
        <a-row>
          <a-col :span="8">
            <a-icon v-show="showBackBtn" type="left" @click="goBack()" />
          </a-col>
          <a-col :span="8" align="center">
            <span>{{ title }}</span>
          </a-col>
          <a-col :span="8" align="right">
            <slot name="action"></slot>
          </a-col>
        </a-row>
      </header>
    </a-affix>
    <div class="wrapper">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
import { Affix, Row, Col } from "ant-design-vue";
export default {
  name: "index",
  components: {
    aAffix: Affix,
    aRow: Row,
    aCol: Col
  },
  props: {
    title: {
      type: String,
      default: "header"
    },
    showBackBtn: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="less">
header {
  padding: 16px 10px;
  .linear_gradient_back(@primary-color, #ffb31c);
  color: white;
  font-size: 20px;
}
</style>
